<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="800px" @open="handleDialogOpen()"
    v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form :model="dietModel" :rules="dialogProps.action === 'add' ? addDiet : editDiet" ref="dietForm"
      label-width="80px" label-position="right" size="small">
      <el-tabs type="border-card" v-model="activeTabName">
        <el-tab-pane name="dietInfoTab" label="基本信息" class="diet-info-tab-pane">
          <el-row>
            <el-col :span="12">
              <el-form-item label="食品名称" prop="foodName">
                <el-input ref="foodName" :maxlength="50" v-model="dietModel.foodName" autofocus></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属类别" prop="belongsCategory">
                <el-select class="parent-select" v-model="dietModel.belongsCategory" placeholder="请选择">
                  <el-option v-for="item in optionSort" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="每Kcal能量" prop="energy">
                <el-input :maxlength="50" v-model="dietModel.energy" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="每KJ能力" prop="eachKilojoules">
                <el-input :maxlength="50" v-model="dietModel.eachKilojoules" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="碳水化合物含量" prop="carbohydrateContent">
                <el-input :maxlength="50" v-model="dietModel.carbohydrateContent" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="脂肪含量" prop="fatContent">
                <el-input :maxlength="50" v-model="dietModel.fatContent" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="蛋白质含量" prop="proteinContent">
                <el-input :maxlength="50" v-model="dietModel.proteinContent" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="高血压" prop="hypertension">
                <el-select class="parent-select" v-model="dietModel.hypertension" placeholder="请选择">
                  <el-option v-for="item in optionHT" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="糖尿病" prop="diabetes">
                <el-select class="parent-select" v-model="dietModel.diabetes" placeholder="请选择">
                  <el-option v-for="item in optionDB" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="冠心病" prop="chd">
                <el-select class="parent-select" v-model="dietModel.chd" placeholder="请选择">
                  <el-option v-for="item in optionCHD" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="脑卒中" prop="stroke">
                <el-select class="parent-select" v-model="dietModel.stroke" placeholder="请选择">
                  <el-option v-for="item in optionSK" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="心脑血管疾病" prop="heartCerebralVessels">
                <el-select class="parent-select" v-model="dietModel.heartCerebralVessels" placeholder="请选择">
                  <el-option v-for="item in optionHCV" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="高血脂" prop="hyperlipaemia">
                <el-select class="parent-select" v-model="dietModel.hyperlipaemia" placeholder="请选择">
                  <el-option v-for="item in optionHYP" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="肥胖" prop="obesity">
                <el-select class="parent-select" v-model="dietModel.obesity" placeholder="请选择">
                  <el-option v-for="item in optionOB" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通风" prop="ventilate">
                <el-select class="parent-select" v-model="dietModel.ventilate" placeholder="请选择">
                  <el-option v-for="item in optionVT" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="说明">
                <el-input class="properties-textarea" type="textarea" :rows="3" v-model="dietModel.illustrate">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('dietForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { saveDiet, updateDiet } from '@/api/Lixueseng520/diet'

  export default {
    name: 'diet-edit',
    data() {
      return {
        loading: true,
        optionSort: [
          { value: '谷薯类及杂豆', label: '谷薯类及杂豆' },
          { value: '大豆类', label: '大豆类' },
          { value: '蔬菜类', label: '蔬菜类' },
          { value: '水果类', label: '水果类' },
          { value: '坚果、种子类', label: '坚果、种子类' },
          { value: '畜肉禽肉鱼虾蟹贝类', label: '畜肉禽肉鱼虾蟹贝类' },
          { value: '奶类', label: '奶类' },
          { value: '蛋类', label: '蛋类' },
        ],
        optionHT: [
          { value: '是', label: '是' },
          { value: '否', label: '否' }
        ],
        optionDB: [
          { value: '是', label: '是' },
          { value: '否', label: '否' }
        ],
        optionCHD: [
          { value: '是', label: '是' },
          { value: '否', label: '否' }
        ],
        optionSK: [
          { value: '是', label: '是' },
          { value: '否', label: '否' }
        ],
        optionHCV: [
          { value: '是', label: '是' },
          { value: '否', label: '否' }
        ],
        optionHYP: [
          { value: '是', label: '是' },
          { value: '否', label: '否' }
        ],
        optionOB: [
          { value: '是', label: '是' },
          { value: '否', label: '否' }
        ],
        optionVT: [
          { value: '是', label: '是' },
          { value: '否', label: '否' }
        ],
        dietModel: {
          id: 0,
          encode: '',
          foodName: '',
          belongsCategory: '',
          energy: '',
          eachKilojoules: '',
          carbohydrateContent: '',
          fatContent: '',
          proteinContent: '',
          hypertension: '',
          diabetes: '',
          chd: '',
          stroke: '',
          heartCerebralVessels: '',
          hyperlipaemia: '',
          obesity: '',
          ventilate: '',
          illustrate: ''
        },
        dialogProps: {
          visible: false,
          action: '',
          title: ''
        },
        activeTabName: 'dietInfoTab',
        addDiet: {
          foodName: [
            { required: true, message: '请输入食品名称', trigger: 'blur' },
            { min: 2, max: 32, message: '长度在 2 到 32 个字符', trigger: 'blur' }
          ],
          belongsCategory:[
            { required: true, message: '请选择', trigger: 'change' }
          ],
          hypertension:[
            { required: true, message: '请选择', trigger: 'change' }
          ],
          diabetes:[
            { required: true, message: '请选择', trigger: 'change' }
          ],
          chd:[
            { required: true, message: '请选择', trigger: 'change' }
          ],
          stroke:[
            { required: true, message: '请选择', trigger: 'change' }
          ],
          heartCerebralVessels:[
            { required: true, message: '请选择', trigger: 'change' }
          ],
          hyperlipaemia:[
            { required: true, message: '请选择', trigger: 'change' }
          ],
          obesity:[
            { required: true, message: '请选择', trigger: 'change' }
          ],
          ventilate:[
            { required: true, message: '请选择', trigger: 'change' }
          ],
        },
        editDiet: {
          foodName: [
            { required: true, message: '请输入食品名称', trigger: 'blur' },
            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
          ]
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.dialogProps.action === 'add') {
              this.doSaveDiet()
            } else {
              this.doUpdateDiet()
            }
          } else {
            return false
          }
        })
      },
      doUpdateDiet() {
        this.loading = true
        updateDiet(this.dietModel.id, this.dietModel)
          .then(response => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.loading = false
            this.dialogProps.visible = false
            this.$emit('save-finished')
          })
          .catch(error => {
            this.loading = false
            this.outputError(error)
          })
      },
      doSaveDiet() {
        this.loading = true
        saveDiet(this.dietModel)
          .then(response => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.loading = false
            this.dialogProps.visible = false
            this.$emit('save-finished')
          })
          .catch(error => {
            this.outputError(error)
          })
      },

      handleDialogClose() {
        this.dialogProps.visible = false
      },
      handleDialogOpen() {
        this.$nextTick(() => {
          this.$refs['dietForm'].clearValidate()
          this.$refs['foodName'].focus()
        })
      },
      outputError(error) {
        console.log(error.response ? error.response : error.message)
        this.loading = false
        this.$message({
          showClose: true,
          message: '出错了，请按F12查看浏览器日志。',
          type: 'error'
        })
      }
    },
    mounted: function () {
      this.$nextTick(() => {
        this.$on('openEditUserDialog', function (exercise) {
          this.dietModel = exercise
          this.dialogProps.action = 'edit'
          this.dialogProps.title = '编辑'
          this.activeTabName = 'dietInfoTab'
          this.dialogProps.visible = true
        })
        this.$on('openAddUserDialog', function () {
          this.dietModel = {
            roleIds: []
          }
          this.dialogProps.action = 'add'
          this.dialogProps.title = '新增'
          this.activeTabName = 'dietInfoTab'
          this.dialogProps.visible = true
        })
      })
    }
  }
</script>

<style lang="scss" scoped>
  .diet-info-tab-pane {
    margin-top: 10px;
  }

  .parent-select {
    width: 220px;
  }

  .properties-textarea {
    width: 496px;
  }
</style>
